<template>
	<view class="page">
		<!-- #ifndef H5 -->
		<view style="height: 88rpx; background-color: #FFFFFF;" />
		<!-- #endif -->
		<view class="loading" v-if="isSend">
			<image class="loading-icon" src="../../../static/chat1.png" mode=""></image>
		</view>

		<view class="nav">
			<image @click="back" class="back" src="../../../static/back.png" mode=""></image>
			<view class="nav_title">
				{{nav_title}}
			</view>
			<navigator :url="'/pages/aiuse/writing/history?aiuseId='+aiuseId" class="history">
				历史记录
			</navigator>
		</view>

		<view class="tab">
			<view :class="['box',mediaRecognType==0 ? 'typeActive' : '']" @click="toggleMediaRecognType(0)">
				纯文本创作
			</view>
			<view :class="['box',mediaRecognType==1 ? 'typeActive' : '']" @click="toggleMediaRecognType(1)">
				文件辅助创作
			</view>
			<view :class="['box',mediaRecognType==2 ? 'typeActive' : '']" @click="toggleMediaRecognType(2)">
				图片辅助创作
			</view>
		</view>

		<view class="fileList" v-if="mediaRecognType != 0">
			<view class="painting_title" v-if="mediaRecognType == 1">
				上传识别文档
				<view @click="changeAvatarUrl">
					<image class="lianjie" src="../../../static/lj.png" mode=""></image>
				</view>
			</view>
			<view class="uploadList" v-if="mediaRecognType == 1">
				<view>
					文件路径<view v-if="filePath" class="upload-filepath">{{filePath}}</view>
				</view><br>
				<view>
					文件名称<view v-if="fileName" class="upload-filepath">{{fileName}}</view>
				</view>
			</view>

			<view class="painting_title" v-if="mediaRecognType == 2">
				上传识别图片
			</view>
			<view class="uploadList" v-if="mediaRecognType == 2">
				<image v-if="imgPath" class="add" :src="imgPath" mode=""></image>
				<view class="add" @click="changeAvatarUrl">+</view>
			</view>
		</view>
		<view class="content">
			<textarea v-model="inputText" @input="handleInput" maxlength="500"
				placeholder="请输入您的文章需求，例如：请写一篇关于春天的文章，500字左右。" name="" id="" cols="30" rows="10"></textarea>
			<view class="number">{{ remainingChars }}/500</view>
			<view class="content_bottom">
				<!-- <image class="lianjie" mode=""></image> -->
				<view class="FX1"></view>
				<view class="obtain">
					<image src="../../../static/chat3.png" mode=""></image>
					<text>拍照取字</text>
					<image @click="clearInputText" style="margin-left: 55rpx;" src="../../../static/chat4.png" mode="">
					</image>
					<text @click="clearInputText">清除文字</text>
				</view>
			</view>
		</view>
		<view class="example">
			<view class="title">
				点击示例试一试
			</view>
			<view class="list" v-for="(item,index) in aiuseLabelListVoList" :key="index" @click="clickLabel(item.name)">
				{{item.name}}
			</view>
		</view>
		<view class="foot" @click="sendMsg">
			一键创作
		</view>
	</view>
	<!-- 上传照片 -->
	<Upload v-if="isUpload" :type="uploadType" :num='1' @getImgs="getImgsFunc" @getFiles="getFileFunc"></Upload>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				uploadType: 'image',
				mediaRecognType: 0, //识别的媒体类型：0-纯文本 1-文件辅助 2-图片辅助
				aiType: '',
				text: '', //用来接收后台记录的文本
				typedText: '', //逐步输出的文本
				inputText: '', //
				maxChars: 500,
				nav_title: 'AI创作',
				aiuseId: '',
				platformId: '',
				aiuseLabelListVoList: [],
				isSend: false,
				imgPath: '',
				filePath: '',
				fileName: '',
				fileId: '',
				isUpload: false
			}
		},
		computed: {
			remainingChars() {
				return this.inputText.length;
			}
		},

		onLoad(options) {
			this.aiuseId = options.aiuseId;
			this.platformId = options.platformId;
			if (this.platformId == 3) { //GPT3.5
				this.aiType = 'gpt3.5';
			} else if (this.platformId == 4) { //gpt4
				this.aiType = 'gpt4';
			} else if (this.platformId == 5) { //mj
				this.aiType = 'mj';
			} else if (this.platformId == 6) { //gpt4o
				this.aiType = 'gpt4o';
			} else {
				this.platformId = 3;
				this.aiType = 'gpt3.5';
			}
			//获取应用详情
			this.getApplicationDetail();
			// 从参数中获取右上角的文字
			// uni.setNavigationBarTitle({
			// 	title: options.value,
			// 	complete: () => {}
			// });
		},
		methods: {
			toggleMediaRecognType(type) {
				this.mediaRecognType = type;
				if (this.mediaRecognType == 1) { //AI文件
					this.uploadType = 'uploadAiFile';
				} else if (this.mediaRecognType == 2) { //图片
					this.uploadType = 'image';
				} else if (this.mediaRecognType == 0) { //图片
					this.uploadType = 'uploadFile';
				}
			},
			back() {
				uni.navigateBack()
			},
			clearInputText() {
				this.inputText = '';
			},
			handleInput() {
				if (this.inputText.length > this.maxChars) {
					this.inputText = this.inputText.substring(0, this.maxChars);
				}
			},
			/*获取数据*/
			getApplicationDetail() {
				let self = this;
				self._get('plus/aiuse/aiuse/detail', {
					appId: 10002,
					aiuseId: this.aiuseId
				}, function(res) {
					self.aiuseLabelListVoList = res.data.aiuseLabelListVoList;
				});
			},
			clickLabel(content) {
				this.inputText = content;
			},
			startTyping() {
				let currentIndex = 0;
				const typingSpeed = 100; // 打字速度，单位：毫秒

				const timer = setInterval(() => {
					this.inputText += this.text[currentIndex];
					currentIndex++;

					if (currentIndex >= this.text.length) {
						clearInterval(timer);
					}
				}, typingSpeed);
			},
			sendMsg() {
				//文件识别模式，文件存在
				if (this.mediaRecognType == 1 && this.fileId && this.fileId != '') {
					this.aiType = 'gpt4';
					this.sendFileTextMsg();
				}
				//图片识别模式
				else if (this.mediaRecognType == 2 && this.imgPath && this.imgPath != '') {
					this.aiType = 'gpt4';
					this.sendImageTextMsg();
				}
				//文本识别模式
				else {
					this.sendTextMsg();
				}
			},
			sendFileTextMsg() {
				let self = this;
				self.isSend = true;
				self._postAIBody('ai/text/fileToText', {
					description: this.inputText,
					aiType: this.aiType,
					platformId: 4,
					aiuseId: self.aiuseId,
					fileId: self.fileId
				}, function(res) {
					self.showText = true
					self.text = res.data
					self.isSend = false
					uni.navigateTo({
						url: '../../aiuse/writing/detail?val=' + res.data + '&type=' + 'edit' + '&title=' +
							self.inputText
					})
					self.inputText = ''
				});
				if (self.isSend) {
					setTimeout(function() {
						self.isSend = false
					}, 2500);
				}
			},
			sendImageTextMsg() {
				let self = this;
				self.isSend = true;
				self._postAIBody('ai/text/imageToText', {
					description: this.inputText,
					aiType: this.aiType,
					platformId: 4,
					aiuseId: self.aiuseId,
					imageUrls: [self.imgPath]
				}, function(res) {
					self.showText = true
					self.text = res.data
					self.isSend = false
					uni.navigateTo({
						url: '../../aiuse/writing/detail?val=' + res.data + '&type=' + 'edit' + '&title=' +
							self.inputText
					})
					self.inputText = ''
				});
				if (self.isSend) {
					setTimeout(function() {
						self.isSend = false
					}, 2500);
				}
			},
			sendTextMsg() {
				let self = this;
				self.isSend = true;
				self._postAIBody('ai/text/generate', {
					description: this.inputText,
					aiType: this.aiType,
					platformId: this.platformId,
					aiuseId: self.aiuseId
				}, function(res) {
					self.showText = true
					self.text = res.data
					self.isSend = false
					uni.navigateTo({
						url: '../../aiuse/writing/detail?val=' + res.data + '&type=' + 'edit' + '&title=' +
							self.inputText
					})
					self.inputText = ''
					// self.startTyping();
				});
				if (self.isSend) {
					setTimeout(function() {
						self.isSend = false
					}, 2500);
				}
			},
			/* 修改头像 */
			changeAvatarUrl() {
				let self = this;
				// if (self.isUpload) {
				// 	uni.showToast({
				// 		title: '再次点击更改头像',
				// 		icon: 'none'
				// 	})
				// }
				self.isUpload = !self.isUpload;
			},
			/*获取上传的图片*/
			getImgsFunc(e) {
				let self = this;
				self.isUpload = false;
				if (e && typeof(e) != 'undefined') {
					let self = this;
					this.imgPath = e[0].filePath
				}
			},
			/*获取上传的文件路径*/
			getFileFunc(fileList, tempFile) {
				let self = this;
				self.isUpload = false;
				if (fileList && typeof(fileList) != 'undefined') {
					let self = this;
					self.fileId = fileList[0];
					self.filePath = tempFile.path;
					self.fileName = tempFile.name;
					//获取到FileId后，调用
					// this.sendMsg();
				}
			}
		}
	}
</script>
<style>
	.page {
		background: #F6F6F6;
	}

	.loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.loading-icon {
		animation: spin 1s infinite linear;
		width: 100rpx;
		height: 100rpx;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>
<style lang='css' scoped>
	.nav {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 88rpx;
		background-color: #FFFFFF;
		position: relative;

		.nav_title {
			flex: 1;
			font-weight: 400;
			font-size: 36rpx;
			color: #333333;
			text-align: center;
		}

		.back {
			width: 21rpx;
			height: 31rpx;
			position: absolute;
			left: 44rpx;
			top: 30rpx;
		}

		.history {
			font-weight: 400;
			font-size: 24rpx;
			color: #2168EA;
			position: absolute;
			right: 44rpx;
			top: 32rpx;
		}
	}

	.fileList {
		margin: 24rpx 20rpx;
		background: white;
		padding: 34rpx 40rpx;
		border-radius: 20rpx;

		.lianjie {
			width: 40rpx;
			height: 40rpx;
			position: fixed;
			right: 2rem;
		}

		.upload-filepath {
			font-size: 0.75rem;
			color: #2168EA;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		.item {
			width: 710rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			position: relative;

			.Ico {
				width: 120rpx;
				height: 120rpx;
				background: #F64B16;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 28rpx;
				margin-left: 15rpx;

				image {
					width: 65rpx;
					height: 65rpx;
				}
			}

			.fileName {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}

			.cx {
				position: absolute;
				top: 22rpx;
				right: 27rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.content {
		width: calc(710rpx - 80rpx);
		height: calc(500rpx - 68rpx);
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 33rpx 20rpx;
		padding: 34rpx 40rpx;

		textarea {
			font-size: 24rpx;
			color: #333333;
			width: 100%;
			height: 330rpx;
			margin-bottom: 10rpx;
		}

		.number {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			text-align: right;
			margin-top: 10rpx;
			margin-bottom: 26rpx;
		}

		.content_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.obtain {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #2168EA;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

			}

		}
	}

	.example {
		margin: 0 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 48rpx 30rpx;

		.title {
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			margin-bottom: 40rpx;
		}

		.list {
			font-weight: 500;
			font-size: 24rpx;
			color: #2168EA;
			margin-bottom: 32rpx;
		}

		.list:last-child {
			margin-bottom: 0;
		}
	}

	.foot {
		position: fixed;
		bottom: 57rpx;
		left: 125rpx;
		background-color: #FFFFFF;
		width: 500rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #2168EA;
		border-radius: 35rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.painting_title {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		padding-left: 16rpx;
		border-left: 5rpx solid #2168EA;
		line-height: 28rpx;
		/* margin-left: 30rpx; */
		margin-bottom: 25rpx;
	}

	.uploadList {
		/* margin: 53rpx; */
		/* margin-bottom: 50rpx; */
		display: flex;
		align-items: center;
		gap: 20rpx;

		.add {
			width: 200rpx;
			height: 200rpx;
			background: #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #2168EA;
		}

		.upload-file {
			width: 200rpx;
			height: 200rpx;
			background: #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #2168EA;
		}
	}

	.tab {
		display: flex;
		width: 650rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		border: 1px solid #2168EA;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		margin: 0 auto;
		margin-bottom: 30rpx;
		margin-top: 30rpx;

		.box {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: 50%;
		}

		.typeActive {
			width: 80%;
			background: #2168EA;
			border-radius: 30rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>